<template>
    <div class="page">
        <div class="top">
            <van-icon class="back" name="arrow-left" @click="goBack()"/>
            <div class="top-xuanze">选择付款方式</div>
            <div></div>
        </div>
        <div class="contentTop">
            <div class="prise">￥{{datas.num||vipinfo.price}}</div>
            <!-- <div class="daojishi">
                <span>剩余时间 : </span>
                <span>12123132</span>
            </div>  -->
        </div>
        <div class="choose-pay">
            <div class="choose-payItme">
                <div class="choose-payItme-left">
                    <van-icon name="wechat" color="#3BA1EE" size="0.7rem" />
                    <span>余额支付</span>
                </div>
                <van-icon name="checked" size="0.4rem" :color="radio==0?'red':'#EFEFF0'"  @click="chooseradio(0)"></van-icon>
            </div>
            <div class="choose-payItme">
                <div class="choose-payItme-left">
                    <van-icon name="wechat" color="#4AC532" size="0.7rem"/>
                    <span>微信支付</span>
                </div>
                <van-icon name="checked" size="0.4rem" :color="radio==1?'red':'#EFEFF0'" @click="chooseradio(1)"></van-icon>
            </div>
            <div class="choose-payItme">
                <div class="choose-payItme-left">
                    <van-icon name="wechat" color="#4AC532" size="0.7rem"/>
                    <span>云闪付支付</span>
                </div>
                <van-icon name="checked" size="0.4rem" :color="radio==2?'red':'#EFEFF0'" @click="chooseradio(2)"></van-icon>
            </div>
            <div class="choose-payItme">
                <div class="choose-payItme-left">
                    <van-icon name="wechat" color="#4AC532" size="0.7rem"/>
                    <span>优惠券抵扣</span>
                </div>
                <van-icon name="checked" size="0.4rem" :color="radio==3?'red':'#EFEFF0'" @click="chooseradio(3)"></van-icon>
            </div>
            <div class="choose-payItme">
                <div class="choose-payItme-left">
                    <van-icon name="alipay" color="#4AC532" size="0.7rem"/>
                    <span>支付宝支付</span>
                </div>
                <van-icon name="checked" size="0.4rem" :color="radio==3?'red':'#EFEFF0'" @click="chooseradio(4)"></van-icon>
            </div>
            <div class="pay-button" @click="pay">立即支付</div>
        </div>
    </div>

</template>
<script>
import request from '../../../static/request.js'
    export default {
        data(){
            return{
                radio: '',
                datas:'',
                vipinfo:{}//开通vip传过来的数据
            }
        },
        created(){
          this.datas = this.$route.params;
          console.log(this.datas);

          // 开通vip传过来的数据
          // 解析网址
          var url=window.location.href
          var vipinfo= this.getUrlParam(url)
          this.vipinfo=vipinfo
          console.log(this.vipinfo)
        },
        methods:{
            goBack(){
              this.$router.go(-1)
            },

            chooseradio(index){
                this.radio=index
                if(index != 0){
                  this.$dialog.alert({
                      title: "提示", //加上标题
                      message: '请余额支付', //改变弹出框的内容
                      showCancelButton: true //展示取水按钮
                  })
                  .then(() => { //点击确认按钮后的调用
                          console.log("点击了确认按钮噢")
                          // this.$router.push('Member')
                  })
                  .catch(() => { //点击取消按钮后的调用
                          console.log("点击了取消按钮噢")
                  })
                }
            },
            // 支付
            pay(){
                if(this.datas){
                  request({
                    url: '?controller=theapi&action=doPay',
                    method: 'get',
                    params: {
                      order_id:this.datas.gid,
                      payment_id:1,
                    }
                  }).then(res=>{
                    console.log(res);
                    if(res.data.data == "success"){
                        this.$dialog.alert({
                            title: "提示", //加上标题
                            message: '支付成功', //改变弹出框的内容
                            showCancelButton: true //展示取水按钮
                        })
                      .then(() => { //点击确认按钮后的调用
                          console.log("点击了确认按钮噢")
                          if(!this.datas.tuanD){
                            window.location.href="http://app.ztsx123.com/1/#/one?id=1"
                            // this.$router.push('Member')
                          }else{
                            this.$router.push('Member')
                          }
                      })
                      .catch(() => { //点击取消按钮后的调用
                          console.log("点击了取消按钮噢")
                      })
                    }else if(res.data.return_code == "error"){
                      this.$dialog.alert({
                          title: "提示", //加上标题
                          message: res.data.return_message, //改变弹出框的内容
                          showCancelButton: true //展示取水按钮
                      })
                      .then(() => { //点击确认按钮后的调用
                          console.log("点击了确认按钮噢")
                          if(!this.datas.tuanD){
                            window.location.href="http://app.ztsx123.com/1/#/one?id=1"
                            // this.$router.push('Member')
                          }else{
                            this.$router.push('Member')
                          }
                      })
                      .catch(() => { //点击取消按钮后的调用
                          console.log("点击了取消按钮噢")
                      })
                    }
                  })
                }else if(this.vipinfo){
                    request({
                        url: '?controller=theapi&action=groupUpGrade',
                        method: 'get',
                        params: {
                            group_id:this.vipinfo.group_id,
                        }
                    }).then(res=>{
                        console.log(res)
                        if(res.data.return_code=="error"){
                            this.$toast(res.data.data);
                        }else{
                            this.$router.push('Member')
                        }
                    })
                }
            },
            // 获取URL传过来的参数
            getUrlParam(sUrl, sKey) {
                var result = {}
                sUrl.replace(/\??(\w+)=(\w+)&?/g,function(all, key, value){
                    if(result[key] !== void 0){
                    var t = result[key]
                    result[key] = [].concat(t,value)
                }else{
                    result[key] = value
                }
                })
                if(sKey === void 0){
                    return result;
                }else{
                    return result[sKey] || ''
                }
            },
        },
        beforeCreate: function () {
            document.body.style.backgroundColor="#F5F6F7"
        },
        beforeDestroy () {
            document.querySelector('body').removeAttribute('#fff')
        }
    }
</script>
<style scoped>
    .back{font-weight: bold;}
    .top{display: flex;justify-content: space-between;line-height: 0.88rem;font-size: 0.32rem;font-weight: bold;align-items: center;padding: 0 0.3rem;background: white}
    .contentTop{padding: 0.46rem;text-align: center;background: white;border-bottom: 1px solid #e6e6e6;margin-top: 0.26rem;}
    .prise{font-size: 0.4rem;color: #F52E67}
    .daojishi{font-size: 0.3rem;margin-top: 0.2rem;}
    .choose-pay{padding: 0.3rem;background: #fff;padding-bottom: 1rem;}
    .choose-payItme{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #e6e6e6;padding: 0.3rem 0;}
    .choose-payItme-left{display: flex;align-items: center;}
    .choose-payItme-left span{margin-left: 0.2rem;font-size: 0.3rem;}
    .radio-active{color: #F52E67}
    .pay-button{width:100%;height:0.82rem;background:linear-gradient(-90deg,rgba(255,109,116,1),rgba(245,46,103,1),rgba(255,83,103,1));border-radius:12px;line-height: 0.82rem;text-align: center;color: white;font-size: 0.32rem;margin-top: 1rem;}
</style>
